<template>
    <div class="aaaa">
        <span @click="previousSong" class="iconfont icon">&#xe670;</span>
        <span v-show="show" @click="clickPlay" class="iconfont icon">&#xe621;</span>
        <span v-show="!show" @click="clickPlay" class="iconfont icon">&#xe605;</span>
        <span @click="nextSong" class="iconfont icon">&#xe674;</span>
    </div>
</template>

<script>
export default {
    name: 'playList',
    data() {
        return {
            show: true
        }
    },
    methods: {
        clickPlay() {
            this.show = !this.show
            this.$emit('clickPlay',this.show)
        },
        // 上一曲
        previousSong() {
            this.$emit('previousSong')
        },
        // 下一曲
        nextSong() {
            this.$emit('nextSong')
        }
    },
}
</script>
<style>
</style>

<style lang="scss" scoped>
.aaaa {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .icon {
        font-size: 100px;
        margin-top: 150px;
        z-index: 1000;
        color: #ffcd32;
    }
}
</style>
